<template>
  <div class="mol w-[14rem] mt-[1.4rem] mb-[2.2rem] mx-auto flex items-center justify-between">
    <div>
      <div class="mol1 flex h-[.4rem] w-fit items-center gap-[0.2rem] py-[0.06rem] pl-[0.06rem] pr-[0.3rem] text-[0.15rem] bg-[rgba(0,93,253,0.1)] rounded-[2rem]">
        <div class="px-[0.12rem] bg-black leading-1 h-full rounded-[2rem] text-white">MBpay</div>
        <div class="font-bold text-[#1A1A1A] text-[0.15rem]">更简单 更安全 更省心 更极速</div>
      </div>
      <h3 class="font-bold text-[.5rem] text-[#006EF9] pt-[.32rem] mb-[.64rem]">安全、自由支付交易平台</h3>
      <p class="text-[.2rem] text-black">使用手机扫码下方二维码开始下载APP</p>
      <img src="@/assets/qrcode.svg" alt="" class="mol2 w-[1.8rem] h-[1.8rem] mt-[.48rem] mb-[.66rem]">
      <div class="flex items-center gap-[.2rem] btns">
        <div @click="nav(1)" class="mol1 cursor-pointer bg-[#006EF9] hover:bg-[#009EF9] rounded-[1rem] gap-[.16rem] w-[2.44rem] h-[.64rem] flex items-center justify-center">
          <span class="text-white text-[.26rem] font-bold">Android下载</span>
          <img src="@/assets/right.svg" class="w-[.32rem] h-[.32rem]" alt="">
        </div>
        <div @click="nav(2)" class="mol1 cursor-pointer bg-[#006EF9] hover:bg-[#009EF9] rounded-[1rem] gap-[.16rem] w-[2.44rem] h-[.64rem] flex items-center justify-center">
          <span class="text-white text-[.26rem] font-bold">IOS下载</span>
          <img src="@/assets/right.svg" class="w-[.32rem] h-[.32rem]" alt="">
        </div>
        <div class="mol1 cursor-pointer bg-[#006EF9] hover:bg-[#009EF9] rounded-[1rem] gap-[.16rem] w-[2.44rem] h-[.64rem] flex items-center justify-center">
          <span class="text-white text-[.26rem] font-bold">H5登录</span>
          <img src="@/assets/right.svg" class="w-[.32rem] h-[.32rem]" alt="">
        </div>
      </div>
    </div>
    <img src="@/assets/ph.png" class="w-[7.07rem]" alt="">
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const androidUrl = ref('')
const iosUrl = ref('')

onMounted(() => {
  fetch('https://api.mbpay.world/v1/h5/download')
    .then(response => response.json())
    .then(data => {
      console.log('Fetched data:', data);
      androidUrl.value = data?.data?.AppVersion?.Android?.FileUrl
      iosUrl.value = data?.data?.AppVersion?.IOS?.FileUrl
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
})

const nav = (type) => {
  if (type === 1) {
    window.open(androidUrl.value, '_blank')
  } else if (type === 2) {
    window.open(iosUrl.value, '_blank')
  }
}
</script>

<style lang="less" scoped>
@media (max-width: 600px) {
  .mol {
    width: 100%;
    flex-direction: column;
    text-align: center;
    .mol1 {
      margin: auto;
    }
    .mol2 {
      margin: auto;
      margin-bottom: .3rem;
    }
  }
  .btns {
    .mol1 {
      width: 2rem;
      img {
        display: none;
      }
    }
  }
}
</style>